<script setup lang="ts">
import {
  ref,
  defineExpose,
  getCurrentInstance, onMounted
} from 'vue'
import {useRoute} from "vue-router";

// 定义功能栏数据结构（数组，匹配后端返回的List）
const FunctionbarList = ref<Array<{
  fid: number;  // 功能ID（数字）
  fname: string;         // 功能名称
  furl: string;          // 图标URL
}>>([]);

const route = useRoute(); // 新增：获取路由实例
const {query} = useRoute();

const global = getCurrentInstance().appContext.config.globalProperties;

//发 get 请求
global.$http.get('/public/maoyanmovieproject/queryAllFunctionBar')
    .then(resp => { //处理成功请求的响应数据
      //在控制台打印从后端获取的数据
      console.log(resp.data);
      FunctionbarList.value = resp.data;
    })
    .catch(err => { //处理失败的请求响应
      new Error(err)
    })


const testExposeFunction = () => {
  console.log('子组件中的方法输出：testExposeFunction....');
}

//对父组件暴露函数
defineExpose({
  testExposeFunction
})

</script>


<template>
  <div class="function-bar-container">
    <!-- 功能栏 -->
    <el-row :gutter="16" class="function-row">
      <el-col :span="6" v-for="item in FunctionbarList" :key="item.fid" class="function-col">
        <!--        这里路由跳转回首页，后面记得改！！！！！！！-->
        <div class="bar-item">
          <router-link :to="{name:'CategoryNavigationBar'}">
            <el-image
                :src="item.furl"
                class="bar-icon"
                fit="contain"
                :preview-src-list="[]"
                alt="功能图标">
            </el-image>
          </router-link>
          <span class="bar-name">{{ item.fname }}</span>
        </div>

      </el-col>
    </el-row>

  </div>
</template>


<style scoped>
.function-bar-container {
  padding: 20px;
}

.function-row {
  margin-bottom: 20px;
}

.function-col {
  display: flex;
  justify-content: center;
}

.bar-name {
  color: black;
  font-size: 14px;
}

.bar-item{
  display: flex;
  flex-direction: column; /* 让图标和文字垂直排列 */
  align-items: center;     /* 水平居中（图标和文字都居中） */
  text-align: center;      /* 确保文字多行时也居中（可选） */
}

/*调节图片大小*/
.bar-icon {
  width: 60px;            /* 图标宽度（根据设计调整） */
  height: 60px;           /* 图标高度（根据设计调整） */
  margin-bottom: 8px;     /* 图标与文字的间距 */
}
</style>
